<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less">
    <link rel="stylesheet/less" href="./less/payment.less">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="header">
                <div class="login-top">
                    <header class="title">
                        <div class="spell">修改支付密码</div>
                        <a href="./setPassword.html">
                            <img src="./img/arrow_back.png">
                        </a>
                    </header>
                </div>
                <div>
                    <ul>
                        <li>
                            <div>账户安全升级</div>
                            <div>设置专属密码，账户更安全！</div>                        
                        </li>
                        <li>
                            <img src="./img/shield.png"/>
                        </li>
                    </ul>
                </div>
                <div>
                    <input type="number" maxlength="1" ref="getValue" v-for="(item,index) in inputList" v-model= "item.val" class="border-input" @keyup="nextFocus($event,index)" @keydown="changeValue(index)"/>
                </div>
            </div>
            <div class="save" @click="savePassword">保存密码</div>
            <div id="toast" v-show="totasStatus">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">{{setPasswordState}}</p>
                </div>
            </div>
            <div id="textToast" v-show="tooltip">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast weui-toast_text">
                    <p class="weui-toast__content">{{tooltipName}}</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="module">
    import { setPaymentPassword } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
            password_one: '',
            password_two: '',
            password_three: '',
            password_four: '',
            password_five: '',
            password_six: '',
            inputList:[
                {
                    val: ''
                },
                {
                    val: ''
                },
                {
                    val: ''
                },
                {
                    val: ''
                },
                {
                    val: ''
                },
                {
                    val: ''
                }
            ],
            tooltip: false,
            totasStatus: false,
            tooltipName: '',
            code: null,
            setPasswordState: ''
        },
        mounted(){
            let that = this;
                that.public.shareLink();
        },
        methods:{

           
            nextFocus(el,index) {
                let that = this;
                    that.password_one = that.inputList[0].val;
                    that.password_two = that.inputList[1].val;
                    that.password_three = that.inputList[2].val;
                    that.password_four = that.inputList[3].val;
                    that.password_five = that.inputList[4].val;
                    that.password_six = that.inputList[5].val;
                    console.log(that.$refs.getValue[index].value);
                var dom = document.getElementsByClassName("border-input"),
                    currInput = dom[index],
                    nextInput = dom[index + 1],
                    lastInput = dom[index - 1];
                if (el.keyCode != 8) {
                    if (index < (this.inputList.length - 1)) {
                        nextInput.focus();
                    } else {
                        currInput.blur();
                    }
                }else{
                    if (index !=0) {
                        lastInput.focus();
                    }
                }
 
            },

            changeValue(index,val) {
                let that = this;
                that.inputList[index].val = "";
            },

            savePassword(){
                let that = this;
                if(that.password_one == ''){
                    that.tooltip = true;
                    that.tooltipName = '第一个密码不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(!/^\d{1}$/.test(that.password_one)){
                    that.tooltip = true;
                    that.tooltipName = '第一个密码请输入数字';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(that.password_two == ''){
                    that.tooltip = true;
                    that.tooltipName = '第二个密码不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(!/^\d{1}$/.test(that.password_two)){
                    that.tooltip = true;
                    that.tooltipName = '第二个密码请输入数字';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(that.password_three == ''){
                    that.tooltip = true;
                    that.tooltipName = '第三个密码不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(!/^\d{1}$/.test(that.password_three)){
                    that.tooltip = true;
                    that.tooltipName = '第三个密码请输入数字';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(that.password_four == ''){
                    that.tooltip = true;
                    that.tooltipName = '第四个密码不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(!/^\d{1}$/.test(that.password_four)){
                    that.tooltip = true;
                    that.tooltipName = '第四个密码请输入数字';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(that.password_five == ''){
                    that.tooltip = true;
                    that.tooltipName = '第五个密码不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(!/^\d{1}$/.test(that.password_five)){
                    that.tooltip = true;
                    that.tooltipName = '第五个密码请输入数字';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(that.password_six == ''){
                    that.tooltip = true;
                    that.tooltipName = '第六个密码不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(!/^\d{1}$/.test(that.password_six)){
                    that.tooltip = true;
                    that.tooltipName = '第六个密码请输入数字';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else{
                    let password = '';
                        password +=that.password_one;
                        password +=that.password_two;
                        password +=that.password_three;
                        password +=that.password_four;
                        password +=that.password_five;
                        password +=that.password_six;
                    that.payment(password);
                   
                }
            },
            payment(password){
                let that = this;
                let userData = JSON.parse(localStorage.getItem("userData"));
                    setPaymentPassword({
                        userId: userData.userId,
                        payPwd: password,
                        type: 1
                    }).then((res)=>{

                        if(res.code !=0){
                            that.code = res.code;
                            that.tooltip = true;
                            that.tooltipName = res.msg;  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                        }

                        if(res.code == 0 ){
                            that.setPasswordState = res.msg;
                            that.totasStatus = true;
                            setTimeout(()=>{
                            that.totasStatus = false;    
                                window.location.href='./mine.html';
                            },2000)
                        }
                    }).catch((error)=>{
                        console.log(error);
                    })
            },
        },
    })
</script>